<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="scripts/function.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/element-ui.css">
</head>
<body>
<div id="app">
    <div id="header" class="wrap">
        <div id="logo"><img src="images/logo.gif"/></div>
        <div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a href="login.html">登录</a><a
                href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a>
        </div>
        <div class="navbar">
            <ul class="clearfix">
                <li class="current"><a href="#">首页</a></li>
                <li><a href="#">图书</a></li>
                <li><a href="#">百货</a></li>
                <li><a href="#">品牌</a></li>
                <li><a href="#">促销</a></li>
            </ul>
        </div>
    </div>
    <div id="childNav">
        <div class="wrap">
            <ul class="clearfix">
                <li class="first"><a href="#">音乐</a></li>
                <li><a href="#">影视</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">小说</a></li>
                <li><a href="#">外语</a></li>
                <li><a href="#">数码相机</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">秋冬靴</a></li>
                <li><a href="#">运动鞋</a></li>
                <li><a href="#">美容护肤</a></li>
                <li><a href="#">家纺用品</a></li>
                <li><a href="#">婴幼奶粉</a></li>
                <li><a href="#">饰品</a></li>
                <li class="last"><a href="#">Investor Relations</a></li>
            </ul>
        </div>
    </div>
    <div id="register" class="wrap">
        <div class="shadow">
            <em class="corner lb"></em>
            <em class="corner rt"></em>
            <div class="box">
                <h1>欢迎注册易买网</h1>
                <ul class="steps clearfix">
                    <li class="current"><em></em>填写注册信息</li>
                    <li class="last"><em></em>注册成功</li>
                </ul>
                <form id="regForm" v-loading="loading" method="post" @submit.prevent="submitForm" action="/">
                    <table>
                        <tr>
                            <td class="field">用户名(*)：</td>
                            <td>
                                <input class="text" type="text" name="userId" v-model="user.userId" id="userId"
                                       maxlength="10"/>
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="field">真实姓名(*)：</td>
                            <td><input class="text" type="text" name="userName" v-model="user.username"/><span></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="field">登录密码(*)：</td>
                            <td><input class="text" type="password" id="password" name="password"
                                       v-model="user.password"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">确认密码(*)：</td>
                            <td><input class="text" type="password" name="confirmPassword"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">性别(*)：</td>
                            <td>
                                <input class="radio" type="radio" name="sex" value="1" checked="checked"
                                       v-model="user.sex">男性</input>
                                <input class="radio" type="radio" name="sex" value="0" v-model="user.sex">女性</input>
                                <span></span></td>
                        </tr>
                        <tr>
                            <td class="field">出生日期：</td>
                            <td><input id="birthday" class="text" type="text" name="birthday"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">身份证：</td>
                            <td><input class="text" type="text" name="identityCode"
                                       v-model="user.identityCode"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">电子邮件：</td>
                            <td><input class="text" type="text" name="email" v-model="user.email"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">手机(*)：</td>
                            <td><input class="text" type="text" name="mobile" v-model="user.mobile"/><span></span></td>
                        </tr>
                        <tr>
                            <td class="field">收货地址(*)：</td>
                            <td><input class="text" type="text" name="userAddress" v-model="user.address"/><span></span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><label class="ui-green"><input type="submit"  name="submit" value="提交注册"/></label>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer">
        Copyright &copy; 2010 项目组 All Rights Reserved. 京ICP证1000001号
    </div>
</div>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
<script type="text/javascript" src="scripts/request.js"></script>
<script type="text/javascript">
    // let b = document.getElementById('birthday').value
    const app = new Vue({
        el: '#app',
        data: {
			shoppingCar: [],
            user: {
                sex: '1'
            },
            loading: false
        },
		mounted() {
			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
		},
        methods: {
            async submitForm() {
                this.loading = true
                setTimeout(async () => {
                    if (document.querySelectorAll('.error').length > 0) {
                        this.loading = false
                        return
                    }
                    this.user.birthday = document.getElementById('birthday').value
                    const resp = await regApi(this.user)
                    if (String(resp.code) === '1') {
                        this.$message({
                            message: '注册成功，正在为你跳转主界面...',
                            type: 'success'
                        });
                        setTimeout("location.href='reg-result.html'", 2000);
                    } else {
                        this.$message.error(`注册错误哦，${resp.data.msg}`);
                    }
                    this.loading = false
                }, 500)
                clearTimeout(this.timer);
            }
        }
    })

</script>
</body>
</html>
